<!-- <template>
  <div class="uni-info-window  uni-panel" v-if="visible">
    <div class="uni-window-title">
      》{{ camera.installPlace || camera.name }}
      <div class="el-icon-close" @click="visible = false"></div>
    </div>
    <videojs-player protocol="rtmp" :streamType="0" style="width: 2400px; height: 1350px; margin-top: 20px;" :cameraIndexCode="camera.cameraIndexCode"></videojs-player>
  </div>
</template> -->
<template>
  <div class="uni-dialog uni-dialog-table uni-center-xy" v-if="visible">
    <div class="uni-dialog-title">
      {{camera.name}}
    </div>
    <videojs-player protocol="rtmp" :streamType="0" style="width: 3800px; height: 1650px;" :cameraIndexCode="camera.cameraIndexCode"></videojs-player>
    <div class="uni-dialog-close uni-center-x" @click="visible = false"></div>
  </div>
</template>
<script>
import VideojsPlayer from './VideojsPlayer'
export default {
  data() {
    return {
      visible: false,
      camera: {
        cameraIndexCode: "",
        id: "",
        belongUserGroup: "",
        installPlace: "",
        isFeiXianChang: false,
        isLaJiFang: false,
        isQuLuanDian: false,
        isXunPing: true,
        latitude: "",
        longitude: "",
        name: "",
        platform: "",
        region: {
          childNodes: [],
          id: "",
          jfCameraList: [],
          name: "",
          parentId: "0",
          parentIds: "",
          sort: 30
        },
        unitIndexCode: ""
      }
    };
  },
  components: {
    VideojsPlayer
  },
  methods: {
    show (camera) {
      this.visible = true
      this.camera = camera
    },
    hide () {
      this.visible = false
    }
  }
}
</script>
<style lang="scss" scoped="scoped">
  // .uni-info-window.uni-panel {
  //   background-color: #10478e;
  //   border: 5px solid #3a6f8e;
  //   padding: 20px 30px;
  //   height: 1530px;
  //   top: 50%;
  //   left: 50%;
  //   min-width: 600px;
  //   transform: translate(-50%, -50%);
  //   -webkit-transform: translate(-50%, -50%);
  //   -ms-transform: translate(-50%, -50%);
  //   -moz-transform: translate(-50%, -50%);
  //   -o-transform: translate(-50%, -50%);
  //   z-index: 100;
  // }
  // .uni-window-title {
  //   font-size: 50px;
  //   line-height: 100px;
  //   margin: 0px;
  //   background-color: #0c356b;
  //   padding-left: 30px;
  //   text-align: left;
  //   color: #ffffff;
  //   border: 0px solid red;
  // }
  // .uni-window-title .el-icon-close {
  //   float: right;
  //   font-size: 60px;
  //   line-height: 100px;
  //   margin-right: 0px;
  //   color: indianred;
  //   border: 2px solid yellow;
  //   cursor: pointer;
  //   padding: 0 20px;
  // }
  // .uni-window-detail {
  //   line-height: 60px;
  //   font-size: 30px;
  //   text-align: left;
  //   padding-left: 0px;
  // }
  .uni-dialog.uni-dialog-table{
    width: 4000px;
    height: 2025px;
    z-index: 101;
    top: 55%;
    box-sizing: border-box;
    background-image: url(../../assets/screen/video_bg.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    font-size: 30px;
    color: #2aa7d3;
    padding: 35px 100px 0px;
    text-align: center;
    line-height: 1.8;
    .uni-dialog-title {
      font-size: 80px;
      line-height: 108px;
      letter-spacing: 8px;
      text-shadow:0px 0px 100px rgba(1,29,116,0.85);
      margin-bottom: 95px;
      color: #FFFFFF;
      height: 108px;
    }
    .uni-dialog-close {
      top: 50px;
      right: 0px;
      left: auto;
      width: 160px;
      height: 160px;
      position: absolute;
    }
  }
</style>
